<template>
	<view class="my-deposit">
		<cu-custom bgColor="bg-gradual-orange" :isBack="true">
			<block slot="content">拓店者管理中心</block>
		</cu-custom>
		<view class="top-header">
			<view class="all-deposit">
				<view class="deposit-num">{{allDeposit}}</view>
				<view class="deposit-tips">待提现押金</view>
			</view>
		</view>
		<view class="deposit-list">
			<view class="list-title">我的代缴列表</view>
			<view class="list-content">
				<my-empty v-if="empty"></my-empty>
				<view class="list-item" v-for="shops in list" :key="shops.id">
					<image :src="shops.logo"></image>
					<view class="item-info"> 
						<view class="item-name">{{shops.title}}</view>
						<view class="item-standard">进度：{{shops.shop_earnings_max}}/5000.00</view>
					</view>
					<button class="takeDraw cu-btn block onWait bg-green" v-if="shops.pay_now==0" @click="goPay(shops.id)">待支付</button>
					<button class="takeDraw cu-btn block" v-if="shops.pay_now==5||shops.pay_now==2" :disabled="changeBtn(shops)">{{changeText(shops.pay_now)}}</button>
					<button v-else class="takeDraw cu-btn block onActive" v-if="shops.pay_now==1"  @click="takeDraw(shops.id)">待提现</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import agent from '@/api/agent';
	import equApi from '@/api/equipment';
	import MyShops from '@/components/MyShops';
	export default {
		data() {
			return {
				list: [],
				deposit: 0.00,
				empty: false,
				shopId:'',
			}
		},
		components: {MyShops,},
		computed:{
			allDeposit(){
				if(this.list.length>0){
					for (let i=0;i<this.list.length;i++) {
						if(this.list[i].pay_now==1||this.list[i].pay_now==5){
							this.deposit += this.list[i].deposit;
							console.log(this.list[i].deposit);
						}
					}
				}
				let allNum = parseInt(this.deposit);
				return allNum.toFixed(2);
			},
			changeBtn(){
				return (param)=>{
					if(param.pay_now==1&&param.aliot_device_name&&param.shop_earnings_max>5000){
						return false;
					}else{
						return false;
					}
					return false;
				}
			},
			changeText(){
				return (param)=>{
					let msg = '';
					if(param==2){
						msg = '已提现';
					}
					if(param==5){
						msg = '待绑定';
					}
					return msg;
				}
			},
		},
		created() {this.loadData()},
		methods: {
			async goPay(shopId) {
				this.shopId = shopId;
				equApi.getWxpay({spid:this.shopId}).then(res=>{
					if (res.code == 1) {
						this.takePay(res.data);
					} else {
						console.log(res);
						uni.showToast({
							title:'服务未开启...',
							icon:false,
						});
					}
				})
			},
			takePay(params) {
				let _this = this;
				wx.requestPayment({
					timeStamp: params.timeStamp,
					nonceStr: params.nonceStr,
					package: params.package,
					signType: 'MD5',
					paySign: params.paySign,
					success: function(res) {
						_this.getRecord();
						console.log('success:' + JSON.stringify(res));
						_this.other=true;
					},
					fail: function(err) {
						_this.getRecord();
						_this.other=true;
						console.log('fail:' + JSON.stringify(err));
					}
				});
			},
			takeDraw(param){
				uni.showLoading({
					title: '加载中..'
				})
				agent.takeDraw({shop_id:param}).then(res=>{
					uni.hideLoading();
					if(res.code == 1){
						uni.showToast({
							title:'已提现'
						});
						this.loadData();
					}else{
						uni.showToast({
							title:'错误',
							icon:false,
						});
					}
					console.log(res);
				})
			},
			loadData() {
				uni.showLoading({
					title: '加载中~'
				})
				setTimeout(() => {
					uni.hideLoading()
				}, 5000)
				agent.paidLists().then(res => {
					uni.hideLoading();
					if (res.code === 1) {
						if (res.data.list.length <= 0) {
							this.empty = true;
							this.list = [];
						} else {
							this.empty = false;
							this.list = res.data.list;
						}
					}else{
						this.empty = true;
						this.list = [];
						this.toast(res.msg);
					}
				})
			}
		}
	}
</script>

<style lang="less">
	.my-deposit{
		background-color: #f7f7f7;
		font-family: 'SimHei';
		.top-header{
			height: 210rpx;
		    text-align: center;
		    padding-top: 50rpx;
			background-color: #fff;
			color: #333333;
		}
		.all-deposit{
			height: 110rpx;
		}
		.deposit-num{
		    font-size: 48rpx;
		}
		.deposit-tips{
		    color: #ccc;
		}
		
		.deposit-list{
		    margin-top: 20rpx;
		    padding: 0 20rpx;
			.list-title{
			    height: 80rpx;
			    line-height: 80rpx;
			    background-color: #fff;
			    text-indent: 1em;
			    color: #ccc;
			    margin-bottom: 2rpx;
			}
			.list-content{
				.list-item{
				    height: 120rpx;
				    margin-bottom: 2rpx;
				    background: #fff;
					padding: 0 25rpx;
					image{
					    width: 100rpx;
					    height: 100rpx;
					    float: left;
					    margin: 10rpx 0;
						margin-right: 25rpx;
					}
					.item-info{
						float: left;
						margin-top: 25rpx;
					}
					button{
					    width: 120rpx;
					    height: 60rpx;
					    line-height: 60rpx;
					    margin-top: 30rpx;
					    font-size: 35rpx;
					    padding: 0;
					    float: right;
						color: rgba(0,0,0,.3);
					}
					.onWait{
						color: #ffffff;
					}
					.onActive{
						background-color: red;
						color: #fff;
					}
					.item-name{
						font-size: 35rpx;
					}
					.item-standard{
					    color: #8dc63f;
					}
				}
			}
		}
	}
</style>
